import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { Button, Form, Input,Toast } from 'antd-mobile'
import '../Login/Login.less'
import Logo from '../../assets/img/logo.png'
import {reqregister} from '../../request/api'
export default class Register extends Component {
  constructor(){
    super()
    this.state={
      user:{
        phone:'',
        nickname:'',
        password:'',
      }
    }
  }
  change(e,key){
    this.setState({
      user:{
        ...this.state.user,
        [key]:e
      }
    })
  }
  register=()=>{
    reqregister(this.state.user).then(d=>{
      if(d.data.code==200){
        //弹框
        Toast.show({
          content:d.data.msg
        })
        // 跳转登录
        this.props.history.push('/login')
      }
    })
  }
  render() {
    let {user}=this.state
    return (
      <div className='login'>
      <Header title={'手机注册'} back></Header>
      <div className='form'>
      <img src={Logo} alt="" />
      <Form layout='horizontal'>
        <div>{JSON.stringify(user)}</div>
        <Form.Item label='用户名' >
          <Input placeholder='请输入用户名' clearable  onChange={(e)=>{this.change(e,'phone')}}/>
        </Form.Item>
        <Form.Item label='昵称' >
          <Input placeholder='请输入昵称' clearable  onChange={(e)=>{this.change(e,'nickname')}}/>
        </Form.Item>
        <Form.Item label='密码' >
          <Input placeholder='请输入密码' clearable type='password'  onChange={(e)=>{this.change(e,'password')}}/>
        </Form.Item>
      </Form>
      <div>
        <Button block color='success' size='middle'  onClick={this.register}>
          注册
        </Button>
      </div>
      </div>
    </div>
    )
  }
}
